<template>
  <div>
    <input type="text" v-model="todoValue" @keyup.enter='setTodoVal' />
  </div>
</template>

<script lang='ts'>
import { defineComponent } from '@vue/runtime-core'
import { ref } from 'vue'
import { IUseTodo, useTodo } from '../../hooks'

export default defineComponent({
  name: 'TodoInput',
  setup() {
    const todoValue = ref<string>('')
    const { setTodo }: IUseTodo = useTodo()

    const setTodoVal = (): void => {
      if (todoValue.value.trim().length) {
        // 设置数据
        setTodo(todoValue.value.trim())
        todoValue.value = ''
      }
    }

    return {
      todoValue,
      setTodoVal
    }
  }
})
</script>

<style>
</style>